* {
  margin: 0;
  padding: 0;
  box-sizing: border-box; }

@-webkit-keyframes xuan1 {
  from {
    -webkit-transform: rotateZ(0);
    transform: rotateZ(0); }
  to {
    -webkit-transform: rotateZ(360deg);
    transform: rotateZ(360deg); } }

@keyframes xuan1 {
  from {
    -webkit-transform: rotateZ(0);
    transform: rotateZ(0); }
  to {
    -webkit-transform: rotateZ(360deg);
    transform: rotateZ(360deg); } }

@-webkit-keyframes xuan2 {
  from {
    -webkit-transform: rotateZ(30deg);
    transform: rotateZ(30deg); }
  to {
    -webkit-transform: rotateZ(390deg);
    transform: rotateZ(390deg); } }

@keyframes xuan2 {
  from {
    -webkit-transform: rotateZ(30deg);
    transform: rotateZ(30deg); }
  to {
    -webkit-transform: rotateZ(390deg);
    transform: rotateZ(390deg); } }

@-webkit-keyframes xuan3 {
  from {
    -webkit-transform: rotateZ(60deg);
    transform: rotateZ(60deg); }
  to {
    -webkit-transform: rotateZ(420deg);
    transform: rotateZ(420deg); } }

@keyframes xuan3 {
  from {
    -webkit-transform: rotateZ(60deg);
    transform: rotateZ(60deg); }
  to {
    -webkit-transform: rotateZ(420deg);
    transform: rotateZ(420deg); } }

@-webkit-keyframes xuan4 {
  from {
    -webkit-transform: rotateZ(90deg);
    transform: rotateZ(90deg); }
  to {
    -webkit-transform: rotateZ(450deg);
    transform: rotateZ(450deg); } }

@keyframes xuan4 {
  from {
    -webkit-transform: rotateZ(90deg);
    transform: rotateZ(90deg); }
  to {
    -webkit-transform: rotateZ(450deg);
    transform: rotateZ(450deg); } }

@-webkit-keyframes xuan5 {
  from {
    -webkit-transform: rotateZ(120deg);
    transform: rotateZ(120deg); }
  to {
    -webkit-transform: rotateZ(480deg);
    transform: rotateZ(480deg); } }

@keyframes xuan5 {
  from {
    -webkit-transform: rotateZ(120deg);
    transform: rotateZ(120deg); }
  to {
    -webkit-transform: rotateZ(480deg);
    transform: rotateZ(480deg); } }

@-webkit-keyframes xuan6 {
  from {
    -webkit-transform: rotateZ(150deg);
    transform: rotateZ(150deg); }
  to {
    -webkit-transform: rotateZ(510deg);
    transform: rotateZ(510deg); } }

@keyframes xuan6 {
  from {
    -webkit-transform: rotateZ(150deg);
    transform: rotateZ(150deg); }
  to {
    -webkit-transform: rotateZ(510deg);
    transform: rotateZ(510deg); } }

.toload {
  position: fixed;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  z-index: 50;
  overflow: hidden;
  -webkit-transition: all 1s;
  transition: all 1s;
  background-color: #555555; }
  .toload > span {
    font-size: 30px;
    position: absolute;
    bottom: 20px;
    left: 10px;
    color: white;
    z-index: 9; }
  .toload .xingxing {
    top: 0;
    width: 100%;
    height: 15%;
    margin-top: -2%;
    background-size: 100%;
    background-image: url(../images/520tupian/jiazai5.png); }
  .toload .load {
    width: 100%;
    height: 100%;
    position: absolute; }
    .toload .load img {
      width: 100%; }
  .toload .huojian {
    top: 36rem;
    left: 35%;
    width: 100%;
    position: absolute; }
    .toload .huojian img {
      width: 22%; }
  .toload .kugo {
    top: 72%;
    left: 83%;
    width: 100%;
    position: absolute; }
    .toload .kugo img {
      width: 16%; }
  .toload .erji {
    top: 85%;
    left: 18%;
    width: 100%;
    position: absolute; }
    .toload .erji img {
      width: 35%; }
  .toload .skip {
    top: 92%;
    left: 78%;
    width: 100%;
    position: absolute; }
    .toload .skip img {
      width: 20%; }

.end {
  left: 0;
  top: 0;
  z-index: 3;
  width: 100%;
  height: 100%;
  -webkit-transform: translateY(-100%);
  transform: translateY(-100%);
  position: fixed;
  background-size: 111%;
  background-color: #FFFFFF;
  background-repeat: no-repeat;
  background-image: url(../images/520tupian/jeishuyebeiji.png); }
  .end .logoright {
    top: 1%;
    left: 0;
    width: 100%;
    position: absolute;
    text-align: right; }
    .end .logoright img {
      width: 35%; }
  .end .endleft {
    top: 1%;
    left: 1%;
    width: 100%;
    position: absolute;
    text-align: left; }
    .end .endleft img {
      width: 35%; }
  .end .medal {
    top: 10%;
    left: 5%;
    width: 100%;
    position: absolute;
    text-align: center; }
    .end .medal img {
      width: 35%; }
  .end .guess {
    top: 36%;
    left: 5%;
    width: 100%;
    position: absolute;
    text-align: center; }
    .end .guess img {
      width: 50%; }
    .end .guess p {
      margin-top: -12%;
      margin-right: 10%;
      font-size: 20px;
      text-align: center; }
  .end .endCenter {
    top: 46%;
    width: 100%;
    position: absolute;
    text-align: center; }
    .end .endCenter img {
      width: 100%; }
    .end .endCenter p {
      margin-top: -25%;
      font-size: 20px;
      text-align: center; }
  .end .challenge {
    top: 62%;
    left: 3%;
    width: 100%;
    position: absolute;
    text-align: left; }
    .end .challenge img {
      width: 40%; }
  .end .share {
    top: 62.5%;
    right: 3%;
    width: 100%;
    position: absolute;
    text-align: right; }
    .end .share img {
      width: 44%; }
  .end .ranking {
    top: 78%;
    width: 100%;
    position: absolute;
    text-align: center; }
    .end .ranking img {
      width: 90%; }
  .end .friend {
    top: 71%;
    width: 100%;
    position: absolute;
    text-align: center; }
    .end .friend img {
      width: 65%; }

.shareol {
  top: 0;
  left: 0;
  z-index: 5;
  width: 100%;
  height: 100%;
  position: fixed;
  -webkit-transform: translateX(-110%);
  transform: translateX(-110%); }
  .shareol img {
    width: 110%; }

.index {
  top: 0;
  left: 0;
  z-index: 15;
  width: 100%;
  height: 100%;
  position: fixed;
  overflow: hidden;
  -webkit-transition: all 1s;
  transition: all 1s;
  background-color: #FFFFFF; }
  .index .logoye {
    top: 0;
    left: 0;
    width: 100%;
    height: 10%;
    position: absolute;
    text-align: right;
    padding: 1% 1% 0 0; }
    .index .logoye img {
      width: 40%; }
  .index .light1 {
    width: 0;
    height: 0;
    -webkit-transform-origin: center;
    transform-origin: center;
    -webkit-animation: xuan1 3s linear infinite;
    border-top: 100px solid transparent;
    border-bottom: 100px solid transparent;
    border-left: 62.5rem solid #555;
    border-right: 62.5rem solid #555;
    position: absolute;
    top: -999px;
    left: -999px;
    right: -999px;
    bottom: -999px;
    margin: auto; }
  .index .light2 {
    width: 0;
    height: 0;
    -webkit-transform-origin: center;
    transform-origin: center;
    -webkit-animation: xuan2 3s linear infinite;
    border-top: 100px solid transparent;
    border-bottom: 100px solid transparent;
    border-left: 62.5rem solid #555;
    border-right: 62.5rem solid #555;
    position: absolute;
    top: -999px;
    left: -999px;
    right: -999px;
    bottom: -999px;
    margin: auto; }
  .index .light3 {
    width: 0;
    height: 0;
    -webkit-transform-origin: center;
    transform-origin: center;
    -webkit-animation: xuan3 3s linear infinite;
    border-top: 100px solid transparent;
    border-bottom: 100px solid transparent;
    border-left: 62.5rem solid #555;
    border-right: 62.5rem solid #555;
    position: absolute;
    top: -999px;
    left: -999px;
    right: -999px;
    bottom: -999px;
    margin: auto; }
  .index .light4 {
    width: 0;
    height: 0;
    -webkit-transform-origin: center;
    transform-origin: center;
    -webkit-animation: xuan4 3s linear infinite;
    border-top: 100px solid transparent;
    border-bottom: 100px solid transparent;
    border-left: 62.5rem solid #555;
    border-right: 62.5rem solid #555;
    position: absolute;
    top: -999px;
    left: -999px;
    right: -999px;
    bottom: -999px;
    margin: auto; }
  .index .light5 {
    width: 0;
    height: 0;
    -webkit-transform-origin: center;
    transform-origin: center;
    -webkit-animation: xuan5 3s linear infinite;
    border-top: 100px solid transparent;
    border-bottom: 100px solid transparent;
    border-left: 62.5rem solid #555;
    border-right: 62.5rem solid #555;
    position: absolute;
    top: -999px;
    left: -999px;
    right: -999px;
    bottom: -999px;
    margin: auto; }
  .index .light6 {
    width: 0;
    height: 0;
    -webkit-transform-origin: center;
    transform-origin: center;
    -webkit-animation: xuan6 3s linear infinite;
    border-top: 100px solid transparent;
    border-bottom: 100px solid transparent;
    border-left: 62.5rem solid #555;
    border-right: 62.5rem solid #555;
    position: absolute;
    top: -999px;
    left: -999px;
    right: -999px;
    bottom: -999px;
    margin: auto; }
  .index .middImg {
    top: 9%;
    z-index: 800;
    width: 100%;
    height: 30%;
    position: absolute;
    text-align: center; }
    .index .middImg img {
      width: 93%; }
  .index .mouth {
    top: 30%;
    width: 100%;
    height: 30%;
    right: 2%;
    position: absolute;
    text-align: center; }
    .index .mouth img {
      width: 100%; }
  .index .person {
    top: 50%;
    width: 100%;
    height: 30%;
    right: 0.1%;
    position: absolute;
    text-align: right; }
    .index .person img {
      width: 100%;
      -webkit-animation: tada 1.5s ease infinite;
      animation: tada 1.5s ease infinite; }
  .index .personer {
    top: 87%;
    width: 100%;
    height: 30%;
    right: 0.1%;
    position: absolute;
    text-align: center; }
    .index .personer img {
      width: 62%;
      -webkit-animation: wobble 1.5s ease infinite;
      animation: wobble 1.5s ease infinite; }

.swiper-container {
  position: absolute;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  -webkit-transition: all 1s;
  transition: all 1s; }
  .swiper-container .swiper-slide {
    width: 100%;
    width: 100%;
    z-index: 900;
    overflow: hidden; }

.backgrounder {
  top: 0;
  position: absolute;
  width: 100%;
  height: 100%;
  text-align: center; }
  .backgrounder img {
    width: 110%;
    -webkit-animation: pulse 2s ease infinite;
    animation: pulse 2s ease infinite; }

.citydr {
  top: 7%;
  position: absolute;
  text-align: center; }
  .citydr img {
    width: 90%; }

.cityWall {
  top: 55%;
  z-index: 800;
  position: absolute; }
  .cityWall img {
    width: 130%; }

.bacImg {
  top: 20%;
  left: 2%;
  width: 100%;
  height: 60%;
  position: absolute;
  text-align: center; }
  .bacImg img {
    width: 100%; }

.rockandroll {
  width: 100%;
  height: 100%; }
  .rockandroll .light1 {
    width: 0;
    height: 0;
    -webkit-transform-origin: center;
    transform-origin: center;
    -webkit-animation: xuan1 3s linear infinite;
    border-top: 100px solid transparent;
    border-bottom: 100px solid transparent;
    border-left: 62.5rem solid #555;
    border-right: 62.5rem solid #555;
    position: absolute;
    top: -999px;
    left: -999px;
    right: -999px;
    bottom: -999px;
    margin: auto; }
  .rockandroll .light2 {
    width: 0;
    height: 0;
    -webkit-transform-origin: center;
    transform-origin: center;
    -webkit-animation: xuan2 3s linear infinite;
    border-top: 100px solid transparent;
    border-bottom: 100px solid transparent;
    border-left: 62.5rem solid #555;
    border-right: 62.5rem solid #555;
    position: absolute;
    top: -999px;
    left: -999px;
    right: -999px;
    bottom: -999px;
    margin: auto; }
  .rockandroll .light3 {
    width: 0;
    height: 0;
    -webkit-transform-origin: center;
    transform-origin: center;
    -webkit-animation: xuan3 3s linear infinite;
    border-top: 100px solid transparent;
    border-bottom: 100px solid transparent;
    border-left: 62.5rem solid #555;
    border-right: 62.5rem solid #555;
    position: absolute;
    top: -999px;
    left: -999px;
    right: -999px;
    bottom: -999px;
    margin: auto; }
  .rockandroll .light4 {
    width: 0;
    height: 0;
    -webkit-transform-origin: center;
    transform-origin: center;
    -webkit-animation: xuan4 3s linear infinite;
    border-top: 100px solid transparent;
    border-bottom: 100px solid transparent;
    border-left: 62.5rem solid #555;
    border-right: 62.5rem solid #555;
    position: absolute;
    top: -999px;
    left: -999px;
    right: -999px;
    bottom: -999px;
    margin: auto; }
  .rockandroll .light5 {
    width: 0;
    height: 0;
    -webkit-transform-origin: center;
    transform-origin: center;
    -webkit-animation: xuan5 3s linear infinite;
    border-top: 100px solid transparent;
    border-bottom: 100px solid transparent;
    border-left: 62.5rem solid #555;
    border-right: 62.5rem solid #555;
    position: absolute;
    top: -999px;
    left: -999px;
    right: -999px;
    bottom: -999px;
    margin: auto; }
  .rockandroll .light6 {
    width: 0;
    height: 0;
    -webkit-transform-origin: center;
    transform-origin: center;
    -webkit-animation: xuan6 3s linear infinite;
    border-top: 100px solid transparent;
    border-bottom: 100px solid transparent;
    border-left: 62.5rem solid #555;
    border-right: 62.5rem solid #555;
    position: absolute;
    top: -999px;
    left: -999px;
    right: -999px;
    bottom: -999px;
    margin: auto; }
  .rockandroll .dengguang {
    top: 0;
    width: 100%;
    height: 30%;
    position: absolute;
    text-align: center; }
    .rockandroll .dengguang img {
      width: 90%; }
  .rockandroll .zhujiao {
    top: 12%;
    width: 100%;
    height: 30%;
    z-index: 900;
    position: absolute;
    text-align: center; }
    .rockandroll .zhujiao img {
      width: 72%; }
  .rockandroll .renqun {
    top: 48.5%;
    width: 100%;
    z-index: 800;
    height: 30%;
    position: absolute; }
    .rockandroll .renqun img {
      width: 100%; }
  .rockandroll .guanzho {
    top: 26%;
    width: 100%;
    height: 30%;
    text-align: left;
    position: absolute; }
    .rockandroll .guanzho img {
      width: 57%; }
  .rockandroll .guanzhoer {
    top: 26.5%;
    width: 100%;
    height: 30%;
    text-align: right;
    position: absolute; }
    .rockandroll .guanzhoer img {
      width: 48%; }

.songer {
  width: 100%;
  height: 100%; }
  .songer .songImg {
    top: 0;
    width: 100%;
    height: 100%;
    position: absolute; }
    .songer .songImg img {
      width: 111%;
      -webkit-animation: pulse 2s ease infinite;
      animation: pulse 2s ease infinite; }
  .songer .dengImg {
    top: 0;
    width: 100%;
    text-align: center;
    position: absolute; }
    .songer .dengImg img {
      width: 90%; }
  .songer .floor {
    top: 45%;
    width: 100%;
    position: absolute; }
    .songer .floor img {
      width: 100%; }
  .songer .xiaohuozi {
    top: 12%;
    left: 8%;
    z-index: 600;
    width: 100%;
    position: absolute; }
    .songer .xiaohuozi img {
      width: 85%; }
  .songer .dangbanone {
    top: 34%;
    width: 100%;
    z-index: 700;
    text-align: right;
    position: absolute; }
    .songer .dangbanone img {
      width: 60%; }
  .songer .dahaner {
    top: 12%;
    left: 1%;
    width: 100%;
    position: absolute; }
    .songer .dahaner img {
      width: 100%; }
  .songer .dangbantwo {
    top: 28%;
    width: 100%;
    position: absolute; }
    .songer .dangbantwo img {
      width: 57%; }

.laosong {
  width: 100%;
  height: 100%; }
  .laosong .zhuImg {
    width: 100%;
    height: 100%;
    position: absolute; }
    .laosong .zhuImg img {
      width: 111%;
      -webkit-animation: pulse 2s ease infinite;
      animation: pulse 2s ease infinite; }
  .laosong .topImg {
    top: 0;
    width: 100%;
    left: 28%;
    text-align: right;
    position: absolute; }
    .laosong .topImg img {
      width: 100%; }
  .laosong .laoren {
    top: 7%;
    left: 6%;
    width: 100%;
    z-index: 900;
    position: absolute; }
    .laosong .laoren img {
      width: 80%; }
  .laosong .liushengji {
    top: 32%;
    width: 100%;
    text-align: center;
    position: absolute; }
    .laosong .liushengji img {
      width: 90%; }

.popular {
  width: 100%;
  height: 100%; }
  .popular .populare {
    top: 0;
    width: 100%;
    height: 100%;
    z-index: 400;
    position: absolute; }
    .popular .populare img {
      width: 113%;
      -webkit-animation: pulse 2s ease infinite;
      animation: pulse 2s ease infinite; }
  .popular .female {
    top: 8%;
    width: 100%;
    height: 100%;
    z-index: 700;
    text-align: right;
    position: absolute; }
    .popular .female img {
      width: 50%; }
  .popular .male {
    top: 22%;
    left: 2%;
    width: 100%;
    height: 100%;
    z-index: 700;
    text-align: right;
    position: absolute; }
    .popular .male img {
      width: 100%; }
  .popular .duihua {
    top: 2%;
    right: 33%;
    width: 100%;
    height: 100%;
    z-index: 800;
    text-align: right;
    position: absolute; }
    .popular .duihua img {
      width: 60%; }
  .popular .changying {
    top: 30%;
    right: 34%;
    width: 100%;
    height: 100%;
    z-index: 700;
    text-align: right;
    position: absolute; }
    .popular .changying img {
      width: 25%; }

.RBer .rbImg {
  top: 0;
  right: 2rem;
  position: absolute;
  width: 100%;
  height: 100%;
  text-align: center; }
  .RBer .rbImg img {
    width: 110%;
    -webkit-animation: pulse 2s ease infinite;
    animation: pulse 2s ease infinite; }

.RBer .dinbuimg {
  top: 0;
  width: 100%;
  text-align: center;
  position: absolute; }
  .RBer .dinbuimg img {
    width: 90%; }

.RBer .vehicle {
  top: 30%;
  width: 100%;
  position: absolute; }
  .RBer .vehicle img {
    width: 99%;
    -webkit-animation: shake 5s ease infinite;
    animation: shake 5s ease infinite; }

.RBer .yaoyao {
  top: 15%;
  left: 10%;
  width: 100%;
  position: absolute; }
  .RBer .yaoyao img {
    width: 65%;
    -webkit-animation: shake 5s ease infinite;
    animation: shake 5s ease infinite; }

.choice {
  width: 100%;
  z-index: 100; }
  .choice .choicebox {
    top: 68%;
    width: 100%;
    z-index: 100;
    position: absolute;
    text-align: center; }
    .choice .choicebox img {
      width: 95%; }
  .choice .math {
    width: 100%; }
    .choice .math div {
      height: 40px;
      line-height: 40px; }
    .choice .math .optionone {
      top: 71%;
      left: 19%;
      width: 51%;
      z-index: 200;
      position: absolute;
      text-align: center; }
    .choice .math .optiontwo {
      top: 80%;
      left: 19%;
      width: 50%;
      z-index: 200;
      position: absolute;
      text-align: center; }
    .choice .math .optionthree {
      top: 88%;
      left: 19%;
      width: 50%;
      z-index: 200;
      text-align: center;
      position: absolute; }
  .choice .timeber {
    top: 71%;
    left: 84.5%;
    width: 10%;
    height: 5%;
    z-index: 200;
    position: absolute; }
    .choice .timeber h2 {
      font-size: 20px; }
  .choice .xiayisho {
    top: 80%;
    left: 86%;
    width: 5%;
    height: 10%;
    z-index: 200;
    position: absolute; }
    .choice .xiayisho h2 {
      font-size: 20px; }
